<template>
  <div class="home-container">
    <div class="home-top">
      <el-row>
        <el-col :span="8">
          <el-card class="box-card header-left">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane name="first">
                <span slot="label">公告<i class="el-icon-star-on" /></span>
                <div v-for="o in 8" :key="o" class="text item">
                  {{ '列表内容 ' + o }}
                </div></el-tab-pane>
              <el-tab-pane name="second">
                <span slot="label">文件<i class="el-icon-star-on" /></span>
                <div v-for="o in 8" :key="o" class="text item">
                  {{ '列表内容 ' + o }}
                </div></el-tab-pane>
              <el-tab-pane name="third">
                <span slot="label">审核<i class="el-icon-star-on" /></span>
                <div v-for="o in 8" :key="o" class="text item">
                  {{ '列表内容 ' + o }}
                </div></el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card v-for="i in 6" :key="i" class="box-card header-right">
            <p class="tip-title">本年度培训活动次数</p>
            <p class="join-number"><b>845</b><span>次</span></p>
            <p class="link-bottom">本月培训次数：12次</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="p in 4" :key="p" class="text item">
          {{ '列表内容 ' + p }}
        </div>
      </el-card>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      activeName: 'second'
    }
  }
}
</script>

<style lang="scss" scoped>
.join-number{
   margin-top: 0;
   margin-bottom: 30px;
   b{
     font-size: 30px;
   }
}
.tip-title{
  margin-top: 0;
  margin-bottom: 2px;
}
    .link-bottom::before{
      content: "";
      width: 100%;
      height: 1px;
      border-bottom: solid gainsboro 1px;
      display: block;
      margin-bottom: 10px;
    }
  .header-right{
    width: 280px;
    height: 150px;
    float: left;
    margin: 5px;
    p{
      padding:0;
    }
  }
  .header-left{
     margin: 5px;
     margin-left: 30px;
     height: 310px;
     span::after{
       content: " ";
       height: 8px;
       width: 8px;
       background-color: red;
       border-radius: 4px;
       display: block;
     }
  }
  .home-footer{
    margin: 30px;
  }
</style>
